<!--
    - 名称：atom-skin
    - 功能：切换主题皮肤
-->
<template>
    <el-tooltip content="主题皮肤">
        <div @click="openThemeConfig" class="p-2 cursor-pointer rounded-md bg-transparent hover:bg-[var(--el-fill-color-light)]">
            <el-icon :size="20">
                <i class="icon-qiehuanzhutise text-[19px] iconfont"></i>
            </el-icon>
            <el-drawer v-model="drawerVisible" direction="rtl" size="20%">
                <template #header>
                    <div class="text-xl font-bold">主题颜色</div>
                </template>

                <section>
                    <el-divider class="section-title pb-4">
                        <span class="text-base">主题颜色配置</span>
                    </el-divider>

                    <el-row class="set-item pb-2" justify="space-between" v-for="item of themeColorOptions">
                        <el-col :span="10">
                            <span>{{ item.label }}</span>
                        </el-col>
                        <el-col :span="2">
                            <el-color-picker v-model="item.color" show-alpha @change="updateThemeColor(item)"></el-color-picker>
                        </el-col>
                    </el-row>
                </section>

                <template #footer>
                    <div style="flex: auto">
                        <el-button @click="drawerVisible = false">取消</el-button>
                        <el-button type="primary">确定</el-button>
                        <el-button type="primary" @click="resetThemeColor">重置样式</el-button>
                    </div>
                </template>
            </el-drawer>
        </div>
    </el-tooltip>
</template>


<script setup lang="ts">

import {BrushFilled, FullScreen} from '@element-plus/icons-vue';
import {ref, onMounted} from "vue";
import {storeToRefs} from 'pinia'
import {useThemeStore} from '@/stores/theme';

const store = useThemeStore()
const {themeColorOptions} = storeToRefs(store);
const {updateThemeColor, resetThemeColor, setThemeColor} = store;

const drawerVisible = ref(false);


/**
 * 点击打开主题配置
 */
function openThemeConfig(): void {
    drawerVisible.value = true;
}


onMounted(() => {
    setThemeColor();
})

</script>

<style scoped lang="less"></style>